<template>
  <div class="shelves-table-root">

    <el-table
      stripe
      height="100%"
      border
      size="mini"
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="order"
        label="序号"
        width="50"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="name"
        label="名称"
      ></el-table-column>
      <el-table-column
        label="所属位置"
      >
        <template slot-scope="scope">
          <el-tooltip :content="scope.row.place" placement="top">
            <div class="table-prop-place">
              {{scope.row.place}}
            </div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
        prop="counterCount"
        align="center"
        width="80"
        label="种子数量">
      </el-table-column>
      <el-table-column
        prop="sonCount"
        align="center"
        width="80"
        label="子类数量">
      </el-table-column>
      <el-table-column
        prop="gerCount"
        align="center"
        width="80"
        label="货柜数量">
      </el-table-column>
      <el-table-column
        prop="shelvesCount"
        align="center"
        width="80"
        label="货架数量">
      </el-table-column>
      <el-table-column
        prop="nickName"
        width="80"
        align="center"
        label="创建人">
      </el-table-column>
      <el-table-column
        prop="createTime"
        width="110"
        label="创建时间">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import { reactive, toRefs, onMounted, ref, watch, computed } from '@vue/composition-api'

  export default {
    name: 'shelves-table',
    props: {
      tableData: {
        type: Array,
        default: []
      }
    },
    setup(props, content) {
      let data = reactive({})
      return { ...toRefs(data) }
    }
  }
</script>

<style scoped lang="scss">
  .shelves-table-root {
    height: 100%;

    .table-prop-place {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
</style>

<style lang="scss">
  .shelves-table-root {
    .el-button.el-button--text.el-button--mini {
      padding: 0;
    }
  }

</style>
